<template>
  <div class="app-container">
    <el-form :inline="true" :model="queryParams" ref="formRef" v-show="showSearch">
      <el-form-item label="用户账号" prop="mobile">
        <el-input
          v-model="queryParams.mobile"
          placeholder="请输入"
          clearable
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="用户状态" prop="status">
        <el-select
          v-model="queryParams.status"
          class="m-2"
          placeholder="请选择"
          size="default"
          clearable
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="标签" prop="enterprise">
        <el-select v-model="queryParams.enterprise" placeholder="请选择" size="default" clearable>
          <el-option
            v-for="item in enterpriseOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="城市标签" prop="cityName">
        <el-select @change="getList" v-model="queryParams.cityName" placeholder="请选择">
          <el-option v-for="item in cityNameOptions" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="用户标识" prop="label">
        <ApiSelect
          v-model="queryParams.label"
          :api="listDataApi"
          :params="{ dictType: 'user_identification' }"
          resultField="rows"
          valueField="dictValue"
          labelField="dictLabel"
          immediate
        />
      </el-form-item>
      <el-form-item label="&nbsp;">
        <el-button @click="resetFn">重置</el-button>
        <el-button type="primary" @click="handleQuery">查询</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table
      v-loading="state.loading"
      ref="multipleTableRef"
      :data="VIPInfoList"
      style="width: 100%"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" width="50" :index="indexAdd" align="center" />
      <el-table-column prop="mobile" label="用户账号" align="center" />
      <el-table-column prop="nickName" width="120" label="用户名称" align="center" />
      <el-table-column prop="mobile" label="联系方式" width="120" align="center" />
      <el-table-column prop="sex" label="性别" align="center" />
      <el-table-column prop="cityName" label="城市标签" align="center" />
      <el-table-column prop="enterprise" label="标签" align="center" />
      <el-table-column prop="labelName" label="用户标识" align="center" />
      <el-table-column prop="birthday" label="生日" align="center" />
      <el-table-column label="订单详情" align="center">
        <template #default="{ row }">
          <el-button type="primary" v-show="row.enterprise" text @click="openDialog(row.id)"
            >详情</el-button
          >
        </template>
      </el-table-column>

      <el-table-column prop="email" label="邮箱" width="120" align="center" />
      <el-table-column prop="status" label="用户状态" width="120" align="center">
        <template #default="{ row }">
          <dict-tag :options="sys_user_stat" :value="row.status ? '0' : '1'" />
        </template>
      </el-table-column>
      <el-table-column prop="status" label="操作" align="center" width="200" fixed="right">
        <template #default="{ row }">
          <el-button
            v-hasPermi="['system:membercenter:dis']"
            type="primary"
            text
            @click="changeStatusFn(row)"
            >{{ row.status ? '禁用' : '启用' }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="state.total > 0"
      :total="state.total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <detailsDialog ref="detailsDialogRef" />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { getVIPInfoApi, changeVIPStatusApi } from '@/api/system/membercenter'
import detailsDialog from './components/detailsDialog'
import useGlobalStore from '@/store/modules/global'
import { listDataApi } from '@/api/system/dict/data'

const globalStore = useGlobalStore()
const { proxy } = getCurrentInstance()
const { sys_user_stat } = proxy.useDict('sys_user_stat')

const formRef = ref()
const detailsDialogRef = ref()
const showSearch = ref(true)
const options = reactive([
  { label: '启用', value: '1' },
  { label: '禁用', value: '0' }
])
const enterpriseOptions = [{ label: '企业用户', value: 1 }]
const cityNameOptions = computed(() => globalStore.myCityList)
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  enterprise: null,
  mobile: null,
  status: null,
  cityName: cityNameOptions.value[0]
})
const state = reactive({
  total: 0,
  loading: false
})
const VIPInfoList = ref([])

/**
 *  点击重置
 */
function resetFn() {
  console.log(formRef.value)
  formRef.value.resetFields()
  getList()
}
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}
/**
 *   获取C端用户的数据
 */
const getList = () => {
  state.loading = true
  // console.log(state.loading)
  getVIPInfoApi(queryParams.value).then((res) => {
    state.loading = false
    // console.log(state.loading)
    VIPInfoList.value = res?.data?.rows.map((item) => {
      return {
        ...item,
        createTime: switchingTimeFn(item.createTime),
        lastConsumptionTime: switchingTimeFn(item.lastConsumptionTime),
        lastLoginTime: switchingTimeFn(item.lastLoginTime),
        enterprise: item.enterprise ? '企业用户' : ''
      }
    })
    state.total = res?.data?.total || 0
  })
}
/**
 *   页面切换递增
 * @param {*} index
 */
function indexAdd(index) {
  const { pageNum, pageSize } = queryParams.value
  return index + 1 + (pageNum - 1) * pageSize
}
/**
 * 改变C端用户状态
 * @param item.status 1-启用  |   0-禁用
 */
const changeStatusFn = (item) => {
  let status = item.status ? '禁用' : '启用'
  // console.log(item)
  proxy.$modal
    .confirm(`确认要${status}"${item.mobile}"用户吗`)
    .then(() => {
      return changeVIPStatusApi({
        id: item.id,
        status: item.status ? 0 : 1
      })
    })
    .then(() => {
      proxy.$modal.msgSuccess(status + '成功')
      getList()
    })
}
function switchingTimeFn(time) {
  if (time) {
    let date = new Date(time) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
    let Y = date.getFullYear() + '-'
    let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
    let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
    let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
    let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
    let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
    return Y + M + D + h + m + s
  } else {
    return ''
  }
}
/**传id，并且打开弹窗 */
function openDialog(id) {
  detailsDialogRef.value.init(id)
}
getList()
</script>

<style lang="scss" scoped>
.el-input {
  width: 215px;
}
</style>
